<template>
  <div>
    <el-form inline>
      <el-form-item label="仓库">
        <el-select @visible-change="getWareInfoListData" v-model="purchaseDetailSearchDto.wareId">
          <el-option
              v-for="item in wareList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="purchaseDetailSearchDto.status">
          <el-option label="新建" value="0"/>
          <el-option label="已分配" value="1"/>
          <el-option label="正在采购" value="2"/>
          <el-option label="已完成" value="3"/>
          <el-option label="采购失败" value="4"/>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input v-model="purchaseDetailSearchDto.searchValue"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button>查询</el-button>
      </el-form-item>
    </el-form>
    <el-button @click="addDialog=true">新增</el-button>
    <el-dropdown>
      <el-button type="primary">
        批量操作
        <el-icon class="el-icon--right">
          <arrow-down/>
        </el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>批量删除</el-dropdown-item>
          <el-dropdown-item @click="mergeDialog=true">合并整单</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
  <div>
    <el-table :data="purchaseDetailListData" style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="编号" width="180"/>
      <el-table-column prop="purchaseId" label="采购单id" width="180"/>
      <el-table-column prop="skuId" label="采购商品id"/>
      <el-table-column prop="skuNum" label="采购数量"/>
      <el-table-column prop="price" label="采购金额"/>
      <el-table-column prop="wareId" label="仓库id"/>
      <el-table-column label="状态">
        <template #default="scope">
          <span v-if="scope.row.status==0">
            <el-tag type="success">新建</el-tag>
          </span>
          <span v-else-if="scope.row.status==1">
            <el-tag>已分配</el-tag>
          </span>
          <span v-else-if="scope.row.status==2">
            <el-tag>正在采购</el-tag>
          </span>
          <span v-else-if="scope.row.status==3">
            <el-tag>已完成</el-tag>
          </span>
          <span v-else-if="scope.row.status==4">
            <el-tag>采购失败</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-text>修改</el-text>
          <el-divider direction="vertical"/>
          <el-text>删除</el-text>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-pagination
        hide-on-single-page
        v-model:current-page="purchaseDetailSearchDto.pageNum"
        v-model:page-size="purchaseDetailSearchDto.pageSize"
        :page-sizes="[5, 7, 9, 20]"
        :small="small"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="purchaseDetailSearchDto.totals"
    />

  </div>
  <div>
    <el-dialog
        v-model="addDialog"
        title="新增采购需求"
        width="40%"
        @close="addRef.resetFields()"
    >
      <div>
        <el-form size="large" :model="addPurchaseDetailData" ref="addRef" label-width="90">
          <el-form-item label="采购商品id" prop="skuId">
            <el-input v-model="addPurchaseDetailData.skuId"></el-input>
          </el-form-item>
          <el-form-item label="采购数量" prop="skuNum">
            <el-input v-model="addPurchaseDetailData.skuNum"></el-input>
          </el-form-item>
          <el-form-item label="金额" prop="skuPrice">
            <el-input v-model="addPurchaseDetailData.price"></el-input>
          </el-form-item>
          <el-form-item label="仓库" prop="wareId">
            <el-select @visible-change="getWareInfoListData" v-model="addPurchaseDetailData.wareId">
              <el-option
                  v-for="item in wareList"
                  :key="item.id"
                  :label="item.id"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="addSubmit">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
  <div>
    <el-dialog
        v-model="mergeDialog"
        title="合并采购单"
        width="30%"
        :before-close="handleClose"
    >
      <div>
        <el-form :model="mergePurchaseData">
          <el-form-item label="采购单">
            <el-select @visible-change="getPurchaseListData" v-model="mergeDto.purchaseId">
              <el-option
                  v-for="item in purchaseListData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="mergeDialog = false">取消</el-button>
        <el-button type="primary" @click="mergeSubmit">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import {ref, reactive, onMounted, watch} from 'vue'
import {getWareInfoList} from "@/api/home/warehouse/warehouse";
import {
  addPurchaseDetail,
  getPurchaseDetailPageList,
  getPurchaseUnreceiveList,
  mergePurchaseDetail
} from '@/api/home/warehouse/purchase'
import {ArrowDown} from '@element-plus/icons-vue'

let addDialog = ref(false)
let mergeDialog = ref(false)
let addRef = ref()
let wareList = ref([])
let purchaseDetailListData = ref([])
let mergeDto = reactive({
  purchaseId: '',
  purchaseDetailIds: ''
})
let purchaseListData = ref([])
let addPurchaseDetailData = reactive({
  skuId: '',
  skuNum: '',
  wareId: '',
  price: 0
})
let purchaseDetailSearchDto = reactive({
  wareId: '',
  status: '',
  searchValue: '',
  pageNum: 1,
  pageSize: 8,
  totals: ''
})

function getPurchaseDetailListData() {
  getPurchaseDetailPageList(purchaseDetailSearchDto).then(res => {
    purchaseDetailListData.value = res.data.records
    purchaseDetailSearchDto.totals = res.data.total - 0
  })
}

function getWareInfoListData() {
  getWareInfoList().then(res => {
    wareList.value = res.data
  })
}

function getPurchaseListData() {
  getPurchaseUnreceiveList().then((res) => {
    purchaseListData.value = res.data
  })
}

function addSubmit() {
  addPurchaseDetail(addPurchaseDetailData).finally(() => {
    getPurchaseListData()
  })
  addDialog.value = false
}

function mergeSubmit() {
  mergePurchaseDetail(mergeDto).finally(() => {
    mergeDialog.value = false
  })
  getPurchaseListData()
}

function handleSelectionChange(values) {
  mergeDto.purchaseDetailIds = values.map(item => {
    return item.id
  })
}


onMounted(() => {
  getPurchaseDetailListData()
})
watch([() => purchaseDetailSearchDto.pageNum, () => purchaseDetailSearchDto.pageSize], () => {
  getPurchaseDetailListData()
})
</script>

<style scoped>

</style>
